<template>
    <!-- <div class="attr"  style="overflow-y: auto"> -->
        <CommonAttr></CommonAttr>
        <el-form style="height: 500px;  overflow-y: auto" >
            <el-form-item label="标题">
                <el-switch
                    v-model="option.title.show"
                    active-text="显示标题"
                >
                </el-switch>
                <el-input
                    v-model="option.title.text"
                    placeholder="请输入内容"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="工具提示">
                <el-switch
                    v-model="option.tooltip.show"
                    active-text="显示提示"
                >
                </el-switch>
            </el-form-item>
            <el-form-item label="图例">
                <el-switch
                    v-model="option.legend.show"
                    active-text="显示图例"
                >
                </el-switch>
            </el-form-item>
            <el-form-item label="横坐标">
                <el-switch
                    v-model="option.xAxis.show"
                    active-text="显示横坐标"
                >
                </el-switch>
            </el-form-item>

            <el-form-item  label="图表类型">
                <el-dropdown>
                    <span class="el-dropdown-link">
                        更换图表类型
                    <el-icon class="el-icon-arrow-down  el-icon--right">
                        <arrow-down />
                    </el-icon>
                    </span>
                    <template #dropdown>
                    <el-dropdown-menu>
                        <span v-for="(chart, index) in charts" :key="index" @click="selectchart(chart.title)">
                            <el-dropdown-item>{{ chart.name }}</el-dropdown-item>
                        </span>
                    </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-form-item>

        <div class="twoitem-container">
            <div class="twoitem-sub">
                <el-form-item label="X轴字体大小">
                    <el-input v-model="option.xAxis.axisLabel.fontSize" ></el-input>
                </el-form-item>
            </div>
            <div class="twoitem-sub">
                <el-form-item label="Y轴字体大小">
                    <el-input v-model="option.yAxis.axisLabel.fontSize" ></el-input>
                </el-form-item>
            </div>
        </div>

        <div class="twoitem-container">
            <div class="twoitem-sub">
                <el-form-item label="柱体颜色">
                    <el-color-picker v-model="option.series.itemStyle.color" show-alpha></el-color-picker>
                </el-form-item>
            </div>
            <div class="twoitem-sub">
                <el-form-item label="柱边颜色">
                    <el-color-picker v-model="option.series.itemStyle.borderColor" show-alpha></el-color-picker>
                </el-form-item>
            </div>
        </div>
        
            <el-form-item label="柱边阴影颜色">
                <el-color-picker v-model="option.series.itemStyle.shadowColor" show-alpha></el-color-picker>
            </el-form-item>

            <el-form-item label="横座标标识">
                <ul>
                    <li v-for="(item, index) in curComponent.propValue.option.xAxis.data" :key="index">
                    {{ item }} 
                    <el-button @click="removeXLabel( index )">删除</el-button>
                    </li>
                </ul>
                <el-button @click="addXLabel">添加</el-button>
            </el-form-item>

            <el-form-item label="纵座标数据">
                <ul>
                    <li v-for="(item, index) in curComponent.propValue.option.series.data" :key="index">
                    {{ item }} 
                    <el-button @click="removeYValue( index )">删除</el-button>
                    </li>
                </ul>
                <el-button @click="addYValue">添加</el-button>
            </el-form-item>
        </el-form>

    <!-- </div> -->
</template>

<script>

import CommonAttr from '@/custom-component/common/CommonAttr.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'
// import {ArrowDown} from "@element-plus/icons";

export default {
    components: { CommonAttr, ArrowDown },
    data() {
        return {
            charts: [
                {
                    title: 'bar',
                    name: '柱状图',
                },
                {
                    title: 'scatter',
                    name: '散点图',
                },
                {
                    title: 'line',
                    name: '折线图',
                },
                {
                    title: 'linesmooth',
                    name: '曲线图',
                },                
            ],

            strXLabel : "aaa",
            strYValue : "",
        }
    },
    computed: {
        curComponent() {
            return this.$store.state.curComponent
        },
        option() {
            return this.$store.state.curComponent.propValue.option
        },
    },

    methods: {
        // 更换表格类型
        selectchart(chart) {
            this.curComponent.propValue.option.series.type = chart
            if( chart === 'line' ){
                this.curComponent.propValue.option.series.smooth = false; // 标记为折线图
            }
            if( chart === 'linesmooth' ){
                this.curComponent.propValue.option.series.type = 'line'; // 标记为折线图
                this.curComponent.propValue.option.series.smooth = true; // 标记为平滑曲线
            }
        },

        removeXLabel( index ){
            this.option.xAxis.data.splice(index, 1); // 删除元素
        },

        addXLabel(  ){
            ElMessageBox.prompt('横轴标签', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            })
            .then(({ value }) => {
                this.option.xAxis.data.push( value )
            })
            .catch(() => {
            })      
        },

        removeYValue( index ){
            this.option.series.data.splice(index, 1); // 删除元素
        },

        addYValue(  ){
            ElMessageBox.prompt('纵轴数据', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^-?\d*\.?\d+$/,
            })
            .then(({ value }) => {
                this.option.series.data.push( value )
            })
            .catch(() => {
            })      
        },


    },
}
</script>

<style>
.attr {
    margin: 13px;
}
.twoitem-container {
    display: flex;
    gap: 20px; /* 设置两个颜色选择器之间的间距 */
}

.twoitem-sub {
    flex: 1; /* 让两个颜色选择器平均分配容器宽度 */
}
</style>
